<body>
<style type="text/css">th{width:150px;text-align:center;}.input{width:850px;}#fileimg{display: none;}</style>
<div class="bjy-admin-nav">
	<i class="fa fa-home"></i> 首页
	&gt;
	轮播图管理
</div>
<ul id="myTab" class="nav nav-tabs">
   	<li class="active">
		<a href="#home" data-toggle="tab">轮播图</a>
   	</li>
   	<li>
		<a href="javascript:;" onclick="add()">上传轮播图</a>
	</li>
</ul>

	<div id="myTabContent" class="tab-content">
	   <div class="tab-pane fade in active" id="home">
			<table class="table table-striped table-bordered table-hover table-condensed">
				<tr>
					<th>图片</th>
					<th>操作</th>
				</tr>
				{volist name="data" id="item"}
					<tr style="text-align:center;">
						<td><img src="{$item.filename|picPath}" alt="" width="300" height="150"></td>
						<td style="line-height:150px;">
							<a href="javascript:;" class="delete" data-id="{$item.id}">删除</a>
						</td>
					</tr>
				{/volist}
			</table>
	   </div>
	</div>

<!-- 添加菜单模态框开始 -->
<div class="modal fade" id="bjy-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		 <div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">上传</h4>
			</div>
			<div class="modal-body">
				<table class="table table-striped table-bordered table-hover table-condensed">
					<tr>
						<td style="text-align:center;">
							<input type="file" onchange="javascript:images_change()" id="fileimg">
            				<input type="hidden" name="filename" placeholder="请上传讲座封面图">
            				<img src="__ADMIN__/default_tupian4.png" height="200" width="200" onclick="javascript:$('#fileimg').click();" id="images" title="点击上传图片">
						</td>
					</tr>
					<tr>
						<td style="text-align:center;">
							<input class="btn btn-success sub-add" type="button" value="上传">
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>
<!-- 添加菜单模态框结束 -->
<script type="">
// 上传轮播图模态框
function add(){
	$('#bjy-add').modal('show');
}
//base64 图片上传
function images_change(){
    var pic = document.getElementById("images"), //显示图片的ID
        file = document.getElementById("fileimg"); // 上传图片按钮的ID
 
    var Suffix = file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
 
     // gif在IE浏览器暂时无法显示
     if(Suffix!='png' && Suffix!='jpg' && Suffix!='jpeg'){
        alert("图片的格式必须为png或者jpg或者jpeg格式！");return;
     }

     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
 
     if(isIE){
        file.select();
        var reallocalpath = document.selection.createRange().text;
        // IE6浏览器设置img的src为本地路径可以直接显示图片
        if(isIE6){
            pic.src = reallocalpath;
         }else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
            pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
            // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
            pic.src = '';
         }
     }else{

        var file = file.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            var pic = document.getElementById("images");
            var base64 = this.result;
            pic.src=this.result;
            // 将base64保存为图片
            $.post("/api/index/upload",{'base64':base64,'Suffix':Suffix},function(data){
                $('[name=filename]').val(data.filename);
            },'json');

        }
    }
}

$(function(){
	/*	删除
	 */
    $('.delete').click(function(){
        if(window.confirm("您确定要删除吗？")){
            $.post("{:url('carousel_delete')}",{'id':$(this).data('id')},function(data){
                if(data.code){
                    alert('删除成功');
                    window.location.href="{:url('carousel')}";
                }else{
                    alert(data.msg);
                }
            },'json');
        }
    })
    /*	确定上传
	 */
    $('.sub-add').click(function(){
        var filename = $("input[name='filename']").val();
        if(filename == ''){
        	alert('请选择图片！');
        	return false;
        }

        $.post('',{'filename':filename},function(data){
            if(data.code){
                alert(data.msg);
                window.location.href = "{:url('carousel')}";
            }else{
                alert(data.msg);
            }
        },'json');
    })

})
</script>